<template>
  <view class="withdraw">
    <view class="withdraw-head">
      <view class="withdraw-head-to">到账渠道</view>
      <view class="withdraw-head-way">
        <view class="withdraw-head-way-1">
          <image class="way-icon" src="/static/images/money.png"></image>
          <text class="way-text" v-if="ali == 0" @click="toTap"
            >还没有绑定账户</text
          >
          <text class="way-text" v-else>{{ info.realname }} [支付宝]</text>
        </view>
      </view>
    </view>
    <view class="withdraw-body">
      <text>提现金额</text>
      <view class="input-money">
        <text class="rmb">￥</text>
        <input v-model.number="extract" type="number" class="t-input" />
      </view>
      <view class="info-money">
        <view v-if="is_out">
          <text class="info-money-num" style="color: #ff1e0f"
            >输入金额超过可提现余额，账户余额{{ pool }}元</text
          >
        </view>
        <view v-else-if="is_lowest">
          <text class="info-money-num" style="color: #ff1e0f"
            >最低{{ lowest }}元起提现，账户余额{{ pool }}元</text
          >
        </view>
        <view v-else>
          <text class="info-money-num">当前可提现余额{{ pool }}元，</text>
          <text class="info-money-all" @click="getAll">全部提现</text>
        </view>
      </view>
      <view :class="'tx' + (is_post ? '-active' : '')"
        ><button @click="handleShowModel">提现</button></view
      >
    </view>

    <view
      :class="[
        'keyboard',
        keyboradShow ? '' : 'active',
        isIphoneX ? 'isIphone' : '',
      ]"
    >
      <block v-for="(item, index) in 9" :key="index">
        <view class="keyboard-item" @tap="keyboradKey(index + 1)">{{
          index + 1
        }}</view>
      </block>
      <view class="keyboard-item hide"></view>
      <view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
      <view class="keyboard-item delte" @tap="keyboradDel()">
        <image
          class="img"
          src="/static/images/del.png"
          mode="aspectFill"
          :lazy-load="true"
        ></image>
      </view>
    </view>

    <view class="cu-modal" :class="showModal ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提现确认</view>
        </view>
        <view class="padding-xl" style="text-align: left">
          <view>
            <text>提现金额：</text>
            <text class="text-red fee">
              {{ money }}
              <em>元</em>
            </text>
          </view>
          <view class="margin-top-sm">
            <text>实际到账：</text>
            <text class="text-red fee">
              {{ real_money }}
              <em>元</em>
            </text>
          </view>
          <!-- <view class="margin-top-sm">
						<text>服务费：</text>
						<text class="text-red fee">
							{{ service_fee }}
							<em>元</em>
						</text>
					</view>
					<view class="margin-top-sm">
						<text>服务费率：</text>
						<text class="text-red">{{ fee }}%</text>
					</view> -->
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn margin-left" @tap="showModal = false">
              我再想想
            </button>
            <button class="cu-btn bg-green margin-left" @tap="getMoney">
              确认提现
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="withdraw-head-way-2" style="margin-top: 50rpx">
      <view
        >1：每个月固定1号、16号为提现到账结算日，遇到法定节假日会自动顺延到下一个结算日。
      </view>
      <view> 2：目前仅支持绑定支付宝账户，一旦绑定后不支持随意解换绑。</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pool: 0,
      extract: 0,
      service_fee: 0.0,
      showModal: false,
      is_out: false,
      is_lowest: false,
      is_post: false,
      lowest: 0,
      fee: 0,
      money: 999,
      real_money: "",
      keyboradShow: false,
      isIphoneX: false,
      isRefuse: false,
      ali: 0,
      info: {},
    };
  },
  watch: {
    extract(oldVal, newVal) {},
  },
  onLoad() {
    this.init();
    // this.loadData();
    // setTimeout(() => {
    // 	this.$api.loading(false);
    // }, 500);
  },
  methods: {
    toTap() {
      uni.navigateTo({
        url: "../account/account",
      });
    },
    init() {
      this.$http.post("api/withdraw/withdraw", {}).then((res) => {
        this.info = res;
        this.pool = res.balance;
        this.ali = res.ali;
      });
    },
    async loadData() {
      const res = await this.$api.json("pool");
      this.lowest = res.least_money;
      this.fee = res.fee;
      this.pool = res.pool;
      this.$nextTick(() => {
        this.keyboradShow = true;
      });
    },
    stopKeyborad() {
      uni.hideKeyboard();
    },
    keyboradKey(key) {
      this.extract = this.extract * 10 + key;
      this.checkMoney();
    },
    keyboradDel() {
      if (this.extract && this.extract > 0) {
        let val = parseInt(this.extract / 10);
        if (val == 0) val = "";
        this.extract = val;
        this.checkMoney();
      }
    },
    getAll() {
      this.extract = parseInt(this.pool);
      this.checkMoney();
    },
    checkMoney() {
      if (!this.extract || this.extract < this.lowest) {
        this.is_lowest = true;
        this.is_post = false;
      } else if (this.extract > this.pool) {
        this.is_out = true;
        this.is_lowest = false;
        this.is_post = false;
      } else {
        this.is_out = false;
        this.is_lowest = false;
        this.is_post = true;
      }
      if (parseFloat(this.extract).toString() == "NaN") {
        this.is_post = false;
        this.$api.msg("输入金额不合法");
      }
    },
    handleShowModel() {
      // if (this.isRefuse) return;
      this.checkMoney();
      // if (!this.is_post) return;
      this.money = this.extract;
      this.service_fee = Number(
        (this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/)
      );
      this.real_money = Number(
        (this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/)
      );
      this.showModal = true;
    },
    getMoney() {
      this.showModal = false;
      // if (this.isRefuse) return;
      this.isRefuse = true;

      this.$http
        .post("api/withdraw/withdrawApply", {
          money: this.extract,
        })
        .then((res) => {
          uni.showToast({
            title: "提现成功",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        });
    },
  },
  onPullDownRefresh() {
    this.extract = "";
    this.loadData();
    this.is_out = false;
    this.is_lowest = false;
    this.is_post = false;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/css/colorui/main.css";

page {
  background-color: #ededed;
}

.withdraw {
  padding: 20px;

  &-head {
    background-color: #f7f7f7;
    display: flex;
    align-content: center;
    padding: 20px 30px;
    font-size: 14px;

    &-to {
    }

    &-way {
      display: flex;
      flex-direction: column;
      align-content: center;
      margin-left: 20px;

      &-1 {
        color: #576b95;
        margin-bottom: 10px;

        .way-icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          top: 2px;
        }
      }

      &-2 {
        color: #acacac;
        font-size: 12px;
      }
    }
  }

  &-body {
    background-color: #fff;
    padding: 20px 30px;
    font-size: 14px;

    .input-money {
      display: flex;
      align-content: center;
      font-weight: 600;
      border-bottom: 0.5px solid #eaeef1;

      .rmb {
        font-size: 2em;
        top: 10px;
        position: relative;
      }

      .t-input {
        height: 1.9em;
        font-size: 2.5em;
        border: none;
        position: relative;
        left: 3.5%;
        outline: none;
      }
    }

    .info-money {
      margin-top: 10px;
      font-size: 12px;
      margin-bottom: 20px;

      &-num {
        color: #b2b2b2;
      }

      &-all {
        color: #576b95;
      }
    }

    .tx {
      button {
        color: #b2b2b2;
      }
    }

    .tx-active {
      button {
        color: #fff;
        background: #07c160;
      }
    }
  }

  .keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ebebeb;
    display: flex;
    justify-content: center;
    z-index: 2;
    flex-wrap: wrap;
    transition: all 0.2s ease-in 0.2s;
  }

  .active {
    bottom: -400rpx;
  }

  .keyboard-item {
    box-sizing: border-box;
    width: 250rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    font-size: 40rpx;
    color: #333;
    height: 99rpx;
    border: 1rpx solid #ebebeb;
    border-top: none;
    border-left: none;
  }

  .hide {
    opacity: 0;
  }

  .delte {
    background: none;
    box-shadow: none;
  }

  .delte image {
    width: 60rpx;
    height: 60rpx;
  }

  .isIphone {
    padding-bottom: 68rpx !important;
  }

  .fee {
    em {
      font-size: 0.5rem;
      font-style: normal;
    }
  }
}
</style>
